<template>
  <div>
    <button @click="add">新建联系人</button>
    <List :list1="list2" @del="del" @edit="edit"></List>
    <v-dialog
      :type="type"
      @close="close"
      @add="getNewInfo"
      @edit="editInfo"
      v-show="isShow"
      ref="dialog"
    ></v-dialog>
  </div>
</template>

<script>
import List from "./List.vue";
import vDialog from "./Dialog.vue";
export default {
  components: {
    List,
    vDialog,
  },
  data() {
    return {
      // 弹窗是否显示
      isShow: false,
      // 联系人数据
      list2: [
        { name: "EDG", phone: 777777777 },
        { name: "DWG", phone: 555555555 },
        { name: "RNG", phone: 666666666 },
        { name: "G2", phone: 2222222222 },
        { name: "IG", phone: 66777755521 },
      ],
      // 弹窗类型
      type: 'add'
    };
  },
  methods: {
    add() {
      // 打开弹窗，准备新增
      this.isShow = true;
      this.type = 'add';
      this.$nextTick(() => {
        this.$refs.dialog.setVal({
          name: '',
          phone: '',
          index: -1
        });
      });
    },
    edit(val) {
      // 打开弹窗，准备修改
      this.isShow = true;
      this.type = 'edit';
      // nextTick DOM更新是异步的，nextTick中的函数会在dom更新后自动执行
      this.$nextTick(() => {
        let obj = {
          name: this.list2[val].name,
          phone: this.list2[val].phone,
          index: val
        }
        this.$refs.dialog.setVal(obj);
      });
    },
    close() {
      // 关闭弹窗
      this.isShow = false;
    },
    // 新建联系人，获取新信息
    getNewInfo(val) {
      this.list2.push(val);
    },
    // 通过index删除联系人
    del(index) {
      this.list2.splice(index, 1);
    },
    editInfo(val1, val2) {
      // console.log(val1);
      // console.log(val2);
      this.list2.splice(val1, 1, val2);
    }
  },
};
</script>

<style>
</style>